<template>
  <div>
    <div class="summary">
      <h2>性别报告</h2>
      <p>男性回答数量: {{ report.men }}</p>
      <p>女性回答数量: {{ report.women }}</p>
    </div>
    <div class="area-list">
      <h3>地区排名（前5）</h3>
      <el-table :data="report.areas" style="width: 100%">
        <el-table-column prop="name" label="地区" width="180" />
        <el-table-column prop="count" label="数量" />
      </el-table>
    </div>
  </div>
</template>

<script setup lang="ts">
import { defineProps } from 'vue';
import { ElTable, ElTableColumn } from 'element-plus';

// 定义接收的 props 类型
const props = defineProps({
  report: {
    type: Object,
    required: true,
  },
});
</script>

<style scoped>
.summary {
  margin-bottom: 20px;
}

.area-list {
  margin-top: 20px;
}
</style>
